<template>
  <div class="edit-popup">
    <popup
      ref="popupRef"
      :title="popupTitle"
      :async="true"
      width="750px"
      :clickModalClose="true"
      @confirm="handleSubmit"
      @close="handleClose"
    >
      <el-form
        ref="formRef"
        :model="formData"
        label-width="130px"
        :rules="formRules"
      >
        <el-form-item label="服务名称" prop="goodsId">
          <!-- <el-input v-model="formData.goodsId" placeholder="请输入服务名称" /> -->
          <el-select
            v-model="formData.goodsId"
            filterable
            @change="goodschange(serviceList)"
            placeholder="请选择服务名称"
            style="width: 100%"
          >
            <el-option
              v-for="item in serviceList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="规格名称" prop="name">
          <el-input v-model="formData.name" placeholder="请输入规格名称" />
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input
            v-model="formData.price"
            @change="changeformDataprice()"
            placeholder="请输入价格，表示该规格的价格"
          />
        </el-form-item>

        <el-form-item label="包年服务数量" prop="preferentialQuantity">
          <el-input
            v-model="formData.preferentialQuantity"
            placeholder="如果是包年服务数量则需要必填"
          />
        </el-form-item>
        <el-form-item label="超出数量优惠金额" prop="incrementPrice">
          <el-input
            v-model="formData.incrementPrice"
            placeholder="请输入超出数量优惠金额"
          />
        </el-form-item>
        <!-- <el-form-item label="创建人" prop="createdBy">
          <el-input v-model="formData.createdBy" placeholder="请输入创建人" />
        </el-form-item>
        <el-form-item label="修改人" prop="updatedBy">
          <el-input v-model="formData.updatedBy" placeholder="请输入修改人" />
        </el-form-item> -->
        <el-form-item label="备注" prop="remark">
          <el-input v-model="formData.remark" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
    </popup>
  </div>
</template>
<script lang="ts" setup>
import type { FormInstance } from "element-plus";
import {
  specificationEdit,
  specificationAdd,
  specificationDetail,
} from "@/api/specification";
import type Popup from "@/components/popup/index.vue";
import feedback from "@/utils/feedback";
import type { PropType } from "vue";
defineProps({
  dictData: {
    type: Object as PropType<Record<string, any[]>>,
    default: () => ({}),
  },
  serviceList: {
    type: Array,
    default: [{ name: 1, id: 1 }],
  },
});
const emit = defineEmits(["success", "close"]);
const formRef = shallowRef<FormInstance>();
const popupRef = shallowRef<InstanceType<typeof Popup>>();
const mode = ref("add");
const popupTitle = computed(() => {
  return mode.value == "edit" ? "编辑服务规格" : "新增服务规格";
});

const formData = reactive({
  id: null,
  goodsId: null,
  goodsName: null,
  name: null,
  price: null,
  incrementPrice: null,
  preferentialQuantity: null,
  createdBy: null,
  updatedBy: null,
  remark: null,
});

const formRules = {
  id: [
    {
      required: true,
      message: "请输入规格ID，随机生成的唯一ID",
      trigger: ["blur"],
    },
  ],
  goodsId: [
    {
      required: true,
      message: "请输入服务名称",
      trigger: ["blur"],
    },
  ],
  name: [
    {
      required: true,
      message: "请输入规格名称",
      trigger: ["blur"],
    },
  ],
  price: [
    {
      required: true,
      message: "请输入价格，表示该规格的价格",
      trigger: ["blur"],
    },
  ],
  //   incrementPrice: [
  //     {
  //       required: true,
  //       message: "请输入数量递增价格，如果为空表示不递增",
  //       trigger: ["blur"],
  //     },
  //   ],
  createdBy: [
    {
      required: true,
      message: "请输入创建人",
      trigger: ["blur"],
    },
  ],
  updatedBy: [
    {
      required: true,
      message: "请输入修改人",
      trigger: ["blur"],
    },
  ],
  //   remark: [
  //     {
  //       required: true,
  //       message: "请输入备注",
  //       trigger: ["blur"],
  //     },
  //   ],
};

const handleSubmit = async () => {
  await formRef.value?.validate();
  //   const data: any = { ...formData };
  const data = {};
  for (const key in formData) {
    if (formData[key] != null) {
      data[key] = formData[key];
    }
  }
  data;
  mode.value == "edit"
    ? await specificationEdit(data)
    : await specificationAdd(data);
  popupRef.value?.close();
  feedback.msgSuccess("操作成功");
  emit("success");
};

const open = (type = "add") => {
  mode.value = type;
  popupRef.value?.open();
};

const setFormData = async (data: Record<string, any>) => {
  for (const key in formData) {
    if (data[key] != null && data[key] != undefined) {
      //@ts-ignore
      formData[key] = data[key];
    }
  }
};

const getDetail = async (row: Record<string, any>) => {
  const data = await specificationDetail({
    id: row.id,
  });
  setFormData(data);
};

const handleClose = () => {
  emit("close");
};
function goodschange(val: any) {
  console.log(val);
  val.forEach((element: { id: string; name: string }) => {
    if (formData.goodsId == element.id) {
      formData.goodsName = element.name;
    }
  });
}
function changeformDataprice() {
  console.log(
    formData.price,
    formData.preferentialQuantity,
    formData.incrementPrice,
    "formData.price"
  );
  if (formData.price != null && formData.price != "") {
    // formData.preferentialQuantity = null;
    // formData.incrementPrice = null;
    // formData = {
    //   id: formData.id,
    //   goodsId: formData.goodsId,
    //   goodsName: formData.goodsName,
    //   name: formData.name,
    //   price: formData.price,
    //   createdBy: formData.createdBy,
    //   updatedBy: formData.updatedBy,
    //   remark: formData.remark,
    // };
  } else {
    // formData = {
    //   id: formData.id,
    //   goodsId: formData.goodsId,
    //   goodsName: formData.goodsName,
    //   name: formData.name,
    //   price: formData.price,
    //   preferentialQuantity: null,
    //   incrementPrice: null,
    //   createdBy: formData.createdBy,
    //   updatedBy: formData.updatedBy,
    //   remark: formData.remark,
    // };
  }
  console.log(
    formData.price != null,
    formData.price != "",
    formData.price != null && formData.price != "",
    formData.preferentialQuantity,
    formData.incrementPrice
  );
}

defineExpose({
  open,
  setFormData,
  getDetail,
});
</script>
